CSS @when Rule: Mastering Conditional Style Application

O mundo do CSS está em constante evolução, oferecendo aos desenvolvedores maneiras mais poderosas e flexíveis de estilizar páginas da web. Um desses recursos que está ganhando força é a regra @when, também conhecida como CSS Conditional Rules Module Level 1. Essa regra permite que você aplique estilos CSS condicionalmente, com base em condições específicas que sejam atendidas. É uma ferramenta poderosa para design responsivo, detecção de recursos e criação de folhas de estilo mais robustas e adaptáveis.

What is the CSS @when Rule?

A regra @when é uma regra condicional at-rule em CSS que permite que você defina estilos que são aplicados apenas se certas condições forem verdadeiras. Pense nisso como uma instrução if para seu CSS. Ao contrário das media queries, que se concentram principalmente nas características da viewport (tamanho da tela, orientação, etc.), @when fornece uma maneira mais geral e extensível de lidar com a estilização condicional. Ele se expande sobre as regras at-rules condicionais existentes, como @supports e @media.

Key Advantages of Using @when

• Improved Code Readability: Ao encapsular a lógica condicional dentro de blocos @when, você torna seu CSS mais fácil de entender e manter. A intenção por trás de aplicações de estilo específicas se torna mais clara.
• Enhanced Flexibility: @when pode lidar com condições mais complexas do que as media queries tradicionais, particularmente quando combinado com consultas de recursos e lógica baseada em JavaScript (usando propriedades personalizadas de CSS).
• Simplified Feature Detection: @when se integra perfeitamente com @supports, permitindo que você aplique estilos apenas quando recursos específicos do navegador estiverem disponíveis. Isso é crucial para o aprimoramento progressivo.
• More Semantic Styling: @when permite que você estilize elementos com base em seu estado ou contexto, levando a um CSS mais semântico e de fácil manutenção. Por exemplo, estilizar elementos com base em atributos de dados ou propriedades personalizadas definidas pelo JavaScript.

Syntax of the @when Rule

            @when <condition> {
  /* CSS rules to apply when the condition is true */
}
            

              
                Copy
              
            
          

O <condition> pode ser qualquer expressão booleana válida que avalie como verdadeira ou falsa. Essa expressão geralmente envolve:

• Media Queries: Condições baseadas nas características da viewport (por exemplo, largura da tela, orientação do dispositivo).
• Feature Queries (@supports): Condições baseadas no suporte do navegador para recursos CSS específicos.
• Boolean Algebra: Combinação de múltiplas condições usando operadores lógicos (and, or, not).

Practical Examples of @when in Action

1. Responsive Design with @when and Media Queries

O caso de uso mais comum para @when é o design responsivo, onde você ajusta os estilos com base no tamanho da tela. Embora as media queries possam conseguir isso por conta própria, @when fornece uma abordagem mais estruturada e legível, especialmente ao lidar com condições complexas.

            @when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}
            

              
                Copy
              
            
          

Neste exemplo, os estilos dentro do bloco @when são aplicados apenas quando a largura da tela está entre 768px e 1023px (tamanho típico de tablet). Isso fornece uma maneira clara e concisa de definir estilos para intervalos de viewport específicos.

Internationalization Note: O design responsivo é fundamental para um público global. Considere variar os tamanhos de tela em diferentes regiões. Por exemplo, o uso de dispositivos móveis é maior em alguns países, tornando o design mobile-first ainda mais crucial.

2. Feature Detection with @when and @supports

@when pode ser combinado com @supports para aplicar estilos apenas quando um recurso CSS específico é suportado pelo navegador. Isso permite que você aprimore progressivamente seu site, proporcionando uma experiência melhor para usuários com navegadores modernos, mantendo a compatibilidade com os mais antigos.

            @when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Fallback styles for browsers that don't support grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Adjust width for older browsers */
  }
}
            

              
                Copy
              
            
          

Aqui, usamos @supports para verificar se o navegador suporta o CSS Grid Layout. Se sim, aplicamos estilos baseados em grid ao .container. Caso contrário, fornecemos estilos de fallback usando flexbox para garantir que um layout semelhante seja alcançado em navegadores mais antigos.

Global Accessibility Note: A detecção de recursos é importante para a acessibilidade. Navegadores mais antigos podem não ter suporte para atributos ARIA mais recentes ou elementos HTML5 semânticos. Forneça fallbacks apropriados para garantir que o conteúdo permaneça acessível.

3. Combining Media Queries and Feature Queries

O verdadeiro poder de @when vem de sua capacidade de combinar media queries e feature queries para criar regras de estilização condicional mais complexas e diferenciadas.

            @when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}
            

              
                Copy
              
            
          

Neste exemplo, o elemento .modal só terá um plano de fundo borrado quando a largura da tela for de pelo menos 768px e o navegador suportar a propriedade backdrop-filter. Isso permite que você crie efeitos visualmente atraentes em navegadores modernos, evitando possíveis problemas de desempenho ou falhas de renderização em navegadores mais antigos.

4. Styling Based on Custom Properties (CSS Variables)

@when também pode ser usado em conjunto com propriedades personalizadas de CSS (também conhecidas como variáveis CSS) para criar estilização dinâmica e orientada por estado. Você pode usar JavaScript para atualizar o valor de uma propriedade personalizada e, em seguida, usar @when para aplicar estilos diferentes com base nesse valor.

First, define a custom property:

            :root {
  --theme-color: #007bff; /* Default theme color */
  --is-dark-mode: false;
}

            

              
                Copy
              
            
          

Then, use @when to apply styles based on the value of the custom property:

            @when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

            

              
                Copy
              
            
          

Finally, use JavaScript to toggle the value of the --is-dark-mode custom property:

            document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});
            

              
                Copy
              
            
          

This allows users to switch between light and dark themes, with the CSS dynamically updating based on the custom property value. Note that direct comparison of CSS variables in `@when` might not be universally supported across browsers. Instead, you might need to use a workaround with a media query checking for a non-zero value:

            @when ( --is-dark-mode > 0 ) { ... }
            

              
                Copy
              
            
          

However, ensure the custom property has a numeric value for this to function correctly.

Accessibility Note: Fornecer temas alternativos (por exemplo, modo escuro) é crucial para a acessibilidade. Usuários com deficiência visual podem se beneficiar de temas de alto contraste. Certifique-se de que sua troca de tema seja acessível via teclado e leitores de tela.

5. Styling Based on Data Attributes

Você também pode usar @when com atributos de dados para estilizar elementos com base em seus valores de dados. Isso pode ser útil para criar interfaces dinâmicas onde os elementos mudam de aparência com base na interação do usuário ou atualizações de dados.

Por exemplo, digamos que você tenha uma lista de tarefas, e cada tarefa tenha um atributo data-status que indica seu status (por exemplo, "todo", "in-progress", "completed"). Você pode usar @when para estilizar cada tarefa de forma diferente com base em seu status.

            [data-status="todo"] {
  /* Default styles for todo tasks */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}
            

              
                Copy
              
            
          

Note: support for the attribute() test condition might be limited or not fully implemented across all browsers currently. Always test thoroughly.

Browser Compatibility and Polyfills

Até o final de 2024, o suporte do navegador para a regra @when ainda está evoluindo. Embora muitos navegadores modernos suportem a funcionalidade principal, alguns navegadores mais antigos podem não suportar. Portanto, é crucial verificar as tabelas de compatibilidade e usar fallbacks ou polyfills apropriados onde necessário.

Sempre consulte recursos como Can I use... para verificar o status atual de suporte do navegador de @when e recursos relacionados.

Best Practices for Using @when

• Keep Conditions Simple: Evite condições excessivamente complexas dentro de blocos @when. Divida a lógica complexa em partes menores e mais gerenciáveis.
• Provide Fallbacks: Sempre forneça estilos de fallback para navegadores que não suportam os recursos que você está usando em suas regras @when. Isso garante uma experiência consistente em diferentes navegadores.
• Test Thoroughly: Teste seu CSS em uma variedade de navegadores e dispositivos para garantir que suas regras @when estejam funcionando conforme o esperado.
• Use Meaningful Comments: Adicione comentários ao seu CSS para explicar o propósito de cada regra @when e as condições em que ela se baseia. Isso tornará seu código mais fácil de entender e manter.
• Consider Performance: Evite usar regras @when em excesso, pois elas podem potencialmente afetar o desempenho. Otimize seu CSS para minimizar o número de regras que precisam ser avaliadas.

Conclusion

A regra @when é uma adição poderosa à caixa de ferramentas CSS, oferecendo aos desenvolvedores uma maneira mais flexível e expressiva de aplicar estilos condicionalmente. Ao combiná-la com media queries, feature queries e propriedades personalizadas de CSS, você pode criar folhas de estilo mais robustas, adaptáveis e de fácil manutenção. Embora o suporte do navegador ainda esteja evoluindo, @when é um recurso que vale a pena explorar e incorporar em seu fluxo de trabalho de desenvolvimento web moderno.

As the web continues to evolve, mastering features like @when will be essential for creating engaging, accessible, and performant experiences for users around the world. Embrace the power of conditional styling and unlock new possibilities in your CSS development.